<template>
  <view class="login-bg">
    <view class="login-center">
      <image src="/static/logo-zgai.png" class="zgai-logo" mode="heightFix" />
      <button
        class="experience-btn scale-in"
        :disabled="!userAgreement.accepted"
        @click="onLogin"
        :class="{ 'btn-disabled': !userAgreement.accepted }"
      >
        立即体验
      </button>
      <view class="agreement-row">
        <view class="checkbox" :class="{ checked: userAgreement.accepted }" @click="toggleAgreement">
          <text v-if="userAgreement.accepted">✔</text>
        </view>
        <text class="agreement-text">
          我已阅读并同意
          <text class="agreement-link" @click="openAgreement('service')">《用户服务及隐私政策》</text>
        </text>
      </view>
    </view>
    <agreement-popup
      :show="showAgreementPopup"
      :type="agreementType"
      @close="showAgreementPopup = false"
      @agree="onAgree"
    />
  </view>
</template>

<script>
import AgreementPopup from '../../components/agreement-popup.vue';

export default {
  components: { AgreementPopup },
  data() {
    return {
      userAgreement: { accepted: false },
      showAgreementPopup: false,
      agreementType: ''
    };
  },
  methods: {
    toggleAgreement() {
      this.userAgreement.accepted = !this.userAgreement.accepted;
    },
    openAgreement(type) {
      this.agreementType = type;
      this.showAgreementPopup = true;
    },
    onAgree() {
      this.userAgreement.accepted = true;
      this.showAgreementPopup = false;
    },
    onLogin() {
      if (!this.userAgreement.accepted) {
        uni.showToast({ title: '请先阅读并同意协议须知', icon: 'none' });
        return;
      }
      uni.showToast({ title: '登录中...', icon: 'loading' });
      
      // 模拟登录成功
      setTimeout(() => {
        // 获取登录后的跳转页面
        const redirectUrl = uni.getStorageSync('loginRedirect') || '/pages/home/index';
        // 清除存储的跳转页面
        uni.removeStorageSync('loginRedirect');
        
        // 更新全局登录状态（这里需要根据实际情况修改）
        getApp().globalData.isLogin = true;
        
        // 跳转到目标页面
        if (redirectUrl === '/pages/home/index') {
          uni.reLaunch({ url: redirectUrl });
        } else {
          uni.redirectTo({ url: redirectUrl });
        }
      }, 1500);
      
      // 实际登录逻辑
      // uni.login({
      //   provider: 'weixin',
      //   success: (res) => {
      //     console.log('微信登录成功', res);
      //     // 获取登录后的跳转页面
      //     const redirectUrl = uni.getStorageSync('loginRedirect') || '/pages/home/index';
      //     // 清除存储的跳转页面
      //     uni.removeStorageSync('loginRedirect');
      //     
      //     // 更新全局登录状态
      //     getApp().globalData.isLogin = true;
      //     
      //     // 跳转到目标页面
      //     if (redirectUrl === '/pages/home/index') {
      //       uni.reLaunch({ url: redirectUrl });
      //     } else {
      //       uni.redirectTo({ url: redirectUrl });
      //     }
      //   },
      //   fail: (err) => {
      //     console.error('登录失败', err);
      //     uni.showToast({ title: '登录失败，请重试', icon: 'none' });
      //   }
      // });
    }
  }
};
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: 60rpx;
}

.zgai-logo {
  width: 340rpx;
  height: 86rpx;
  margin-bottom: 64rpx;
  display: block;
}

.experience-btn {
  width: 440rpx;
  height: 88rpx;
  background: #00b386;
  color: #fff;
  font-size: 36rpx;
  border-radius: 44rpx;
  border: none;
  margin-bottom: 36rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 179, 134, 0.08);
  font-weight: 600;
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.experience-btn:active {
  transform: scale(0.98);
}

.experience-btn.btn-disabled,
.experience-btn:disabled {
  background: #e0e0e0 !important;
  color: #aaa !important;
  border: none !important;
  box-shadow: none;
}

/* 优化后的协议行样式 */
.agreement-row {
  flex-direction: row;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-top: 20rpx;
  width: 100%;
  max-width: 600rpx; /* 限制最大宽度 */
  flex-wrap: wrap; /* 允许换行 */
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  margin-right: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #00b386;
  font-size: 28rpx;
  flex-shrink: 0; /* 防止被压缩 */
}

.checkbox.checked {
  border-color: #00b386;
  background: #e6f9f3;
}

.agreement-text {
  color: #666;
  font-size: 24rpx;
  line-height: 36rpx;
  display: flex; /* 使内部元素保持在一行 */
  flex-wrap: wrap; /* 允许文本换行 */
  justify-content: center; /* 文本居中 */
  text-align: center; /* 文本居中 */
}

.agreement-link {
  color: #00b386;
  text-decoration: underline;
  margin: 0 8rpx;
  font-size: 24rpx;
  white-space: nowrap; /* 链接文本不换行 */
}

.scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 响应式调整 */
@media (max-width: 400px) {
  .agreement-text {
    font-size: 22rpx;
  }
  
  .agreement-link {
    font-size: 22rpx;
  }
  
  .experience-btn {
    width: 380rpx;
    font-size: 32rpx;
  }
}
</style>